<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My WebSocket</title>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
Welcome To My WebSocket.<br/><br/>
<div id="ws">
    <input value="Huobi_BTC_USDT,Okex_BTCQUARTER_USD" style=" width: 300px" id="text" type="text"/>
    <button onclick="sendWsSubscribe()">Subscribe</button>
    <button onclick="closeWS()" :disabled="!opened">Close</button>
    <button onclick="openWs()" :disabled="opened">Open</button>
    <button onclick="openWs('/wx/','?a=1&b=2')" :disabled="opened">OpenX</button>
    <div id="info"></div>
    <div id="info-msg" v-html="msg"></div>
</div>
</body>

<script type="text/javascript">
    var ws = window.WebSocket;
    var url = window.location.host;
    var protocol = window.location.protocol;
    var wsProtocol;
    if (protocol === 'http:')
        wsProtocol = 'ws://';
    else if (protocol === 'https:')
        wsProtocol = 'wss://';

    var sum = 0;
    var wsVue = new Vue({
        el: '#ws',
        data: {
            msg: "welcome to my websocket...<br/>",
            opened: false
        },
        mounted: function () {
            openWs();
        }
    });

    function openWs(path='/ws/',params='') {

        if(!ws){
            alert('Sorry, WebSocket not supported by your browser.')
            return;
        }
        var r = Math.random();
        {
            // ws = new WebSocket("ws://120.55.45.178:80/ws/uid01");
            // ws = new WebSocket("ws://topcoin.bicoin.com.cn/ws/uid01");
            // ws = new WebSocket("ws://118.31.73.51:1903/ws/uid01");
            ws = new WebSocket(wsProtocol + url + path + r + params,r);
        }

        //Error callback
        ws.onerror = function () {
            setMessageContent("error!");
            wsVue.opened = false;
        };
        //socket opened callback
        ws.onopen = function (event) {
            setMessageContent("websocket opened");
            wsVue.opened = true;
        }
        //message received callback
        ws.onmessage = function (event) {
            setMessageContent(event.data);
        }
        //socket closed callback
        ws.onclose = function () {
            setMessageContent("websocket closed");
            wsVue.opened = false;
        }
        //when browser window closed, close the socket, to prevent server exception
        window.onbeforeunload = function () {
            ws.close();
        }
    }

    //update message to vue and then in div
    function setMessageContent(content) {
        sum++;
        if (sum % 50 === 0) {
            wsVue.msg = "";
            sum = 0;
        }
        wsVue.msg += content + '<br/>';
    }

    //click to close the websocket
    function closeWS() {
        ws.close();
        wsVue.opened = false;
    }


    //click to send message
    function sendWsSubscribe() {
        if (ws.readyState == WebSocket.OPEN) {
            ws.send('{"event": "' + "YOLO" + '"}');
        }
    }


    //click to send message
    function sendSubscribe() {
        $("#info").html("");
        var keys = document.getElementById('text').value;//获取输入框的订阅key
        var json = JSON.stringify({
            uid: myuid, keys: keys
        })
        $.ajax({
            type: "post",
            url: "/ws/resubscript",
            dataType: "json",
            data: json,
            contentType: "application/json",
            success: function (data) {
                if (data == true) {
                    $("#info").html("订阅成功")
                } else {
                    $("#info").html("订阅失败")
                }
            }
        })

    }
</script>
</body>
</html>